<template>
  <div class="container">
    <map class="map"
         :markers="markers"
         id="myMap"
         :longitude="longitude"
         :latitude="latitude"
         :scale="scale"
         enable-zoom="true"
         @regionchange="regionChange"
         :polygons="polygons"
         show-location
         @begin="regionChangeBegin"
         @end="regionChangeEnd"
         v-if="mapShow"
    >
      <div class="tips" v-if="showNoticeTop">
        <swiper class="swiper-container" :indicator-dots="true" :autoplay="true">
          <block v-for="(item,index) in noticeTop" :index="index" :key="index">
            <swiper-item>
              <img :src="item.imgUrl" @click="goActivity(item)" alt="">
            </swiper-item>
          </block>
        </swiper>
        <!-- <cover-image class="img" :src="noticeTop.imgUrl" @click="goActivity(noticeTop)"/> -->
      </div>
      <cover-image class="icon-center" src="/static/images/location.png"/>
      <cover-image class="icon icon-alert" src="/static/images/home_btn_red.png" @click="jump('useTip')"/>
      <!-- <cover-image class="icon icon-refresh" src="/static/images/icon_refresh.png" @click="refresh"/>
      <cover-image class="icon icon-user" src="/static/images/icon_gerenzhongxin.png" @click="jump('myself')"/> -->
      <cover-image class="icon icon-locate" src="/static/images/home_btn_position.png" @click="init()"/>
      <cover-image class="icon icon-tips" src="/static/images/home_btn_kf.png" @click="makePhone('4000029717')"/>
      <cover-view class="control-btn">
        <cover-image class="bg" src="/static/images/home_btn_scan.png"/>
        <cover-view class="button" @click="userCar"></cover-view>
      </cover-view>
      <div class="notice-box" v-if="showNotice">
        <swiper class="swiper-container" :indicator-dots="true" :autoplay="true">
          <block v-for="(item,index) in noticeBox" :index="index" :key="index">
            <swiper-item>
              <img :src="item.imgUrl" @click="goActivity(item)" alt="">
            </swiper-item>
          </block>
        </swiper>
        <cover-image class="close" src="https://klcx-bucket.oss-cn-beijing.aliyuncs.com/klcx-xcx/ico/close.png" @click="closeNotice"/>
      </div>
      <!-- <cover-view class="footer" v-if="isUsing">
        <cover-view class="close-status" @click="isUsing=false">X</cover-view>
        <cover-view class="bike-info">
          <cover-image class="logo" src="/static/images/bike-round.png" />
          <cover-view class="info">
            <cover-view class="item">517729739</cover-view>
            <cover-view class="item">预计行驶：30 km</cover-view>
          </cover-view>
          <cover-view class="info">
            <cover-view class="item"></cover-view>
            <cover-view class="item color-yellow">还车范围内</cover-view>
          </cover-view>
        </cover-view>
        <cover-view class="flex-box">
          <cover-view class="flex-item-info">
            <cover-image class="img-tag fl" src="/static/images/user-time.png"></cover-image>
            <cover-view class="fl">
              <cover-view class="item-info-line">26分钟</cover-view>
              <cover-view class="item-info-line color-gray">骑行时长</cover-view>
            </cover-view>
          </cover-view>
          <cover-view class="flex-item-info">
            <cover-image class="img-tag fl" src="/static/images/user-amount.png"></cover-image>
            <cover-view class="fl">
              <cover-view class="item-info-line">3元</cover-view>
              <cover-view class="item-info-line color-gray">骑行费用</cover-view>
            </cover-view>
          </cover-view>
        </cover-view>
        <cover-view class="flex-box">
          <cover-view class="flex-item-operation">
            <cover-image class="img-operatin" src="/static/images/yc-unlock.png"></cover-image>
            <cover-view>开车</cover-view>
          </cover-view>
          <cover-view class="flex-item-operation">
            <cover-image class="img-operatin" src="/static/images/yc-lock.png"></cover-image>
            <cover-view>锁车</cover-view>
          </cover-view>
          <cover-view class="flex-item-operation">
            <cover-image class="img-operatin" src="/static/images/yc-search.png"></cover-image>
            <cover-view>寻车</cover-view>
          </cover-view>
        </cover-view>
        <cover-view class="flex-box">
          <cover-view class="flex-item-operation count-box">
            <cover-view class="fl">10s</cover-view>
            <cover-view class="fl color-gray">10秒倒计时内，无操作恢复计费!</cover-view>
          </cover-view>
        </cover-view>
        <cover-view class="flex-box">
          <button class="btn">继续用车</button>
          <button class="btn confirm-back">确认还车</button>
        </cover-view>
        <button class="btn">还车</button>
      </cover-view> -->
      <cover-view class="footer" v-if="isBikeDetailsShow">
        <cover-view class="close-status" @click="isBikeDetailsShow=false">X</cover-view>
        <cover-view class="bike-info">
          <cover-image class="logo" src="/static/images/bike-round.png" />
          <cover-view class="info">
            <cover-view class="item">{{bikeDetails.plateNo}}</cover-view>
            <cover-view class="item">预计行驶：{{bikeDetails.extensionMileage}} km</cover-view>
          </cover-view>
        </cover-view>
        <cover-view class="desc">
          <cover-view class="desc-row">收费标准：</cover-view>
          <cover-view class="desc-row">{{bikeDetails.priceRuleStr}}</cover-view>
          <cover-view class="desc-row">
            <cover-view class="fl">无开车、未骑行不收费。</cover-view>
            <cover-view class="pay-detail" @click="toCharge">详情</cover-view> 
          </cover-view>
          <cover-view class="desc-row">
            <cover-view class="fl">还车范围：</cover-view>
            <cover-view class="fl search-scope" @click="goProhibit">查看还车范围</cover-view>
          </cover-view>
        </cover-view>
        <button class="btn" :disabled="disable" @click="makeOrder">确认用车</button>
      </cover-view>
    </map>
  </div>
</template>

<script>
  import App from '../../App'
  import Service from '@/utils/service'
  import {canvasArea, getUrlParam} from '@/utils/index'

  export default {
    data() {
      return {
        latitude: 0,
        longitude: 0,
        scale: 19,
        mapCtx: null,
        markers: [],
        windowHeight: null,
        polygons: [],
        areaPolygons:[],
        nearPolygons:[],
        areaArr:[],
        changelongitude:null,
        changelatitude:null,
        nearOrAll:null,
        nearlatitude:null,
        nearlongitude:null,
        myscale:null,
        mapShow: false,
        useBike: true,
        count:3,
        disable:false,
        adCode: '',
        noticeTop: [],
        noticeBox: [],
        showNoticeTop: false,
        showNotice: false,
        getNoticeBox: false,
        bikeDetails:{},
        isBikeDetailsShow:false,
        isUsing:false,

        // orderNo: '',
        // operateAreaId:null,
        // info:{},
        // time: null,
        // orderInfo:{},
        // noreturn:[],
        // operaArea:[],
        // dialog:null,
        // operateAreaIdfive:null,
      }
    },
    onShareAppMessage() {
      return {
        imageUrl: '/static/images/logo.jpg'
      }
    },
    onLoad(options) {
      if(options.bikeDetails) {
        this.bikeDetails = JSON.parse(options.bikeDetails);
        this.isBikeDetailsShow = true
      }else {
        this.isBikeDetailsShow = false
      }
      let scene = App.globalData.scene;
      let q = options.q;
      let no = null;
      if (q) {
        q = decodeURIComponent(q);
        let queryParams = getUrlParam(q) || {};
        console.log(queryParams)
        no = queryParams.no;
      }
      if (scene == 1011 && no != null) {
        let userInfo = wx.getStorageSync('userInfo')
        if (!userInfo) {   // 扫码进入如果没登录跳转至登录页
          wx.redirectTo({
            url: '../login/main'
          })
          return
        }
        let data = {
          plateNo: no
        }
        this._bikeResult(data)
      } else {
        if (options.bikeDetails) {
          let bikeDetails = JSON.parse(options.bikeDetails);
          this._setBikeDetails(bikeDetails)
        } else {
          this._setBikeDetails(null)
        }
      }
      wx.showShareMenu()
      this.mapShow = false
      this.getNotice('2') //首页弹框
      this.getNotice('9') //首页上方banner
      let userInfo = wx.getStorageSync('userInfo')
      // if (userInfo && !options.isUsing) {
        this.getOrderStatus('hasSomething')
      // }
    },
    onShow() {
      this.mapShow = true
      this.scale = 19
      let _this = this
      let localtion = wx.getStorageSync('localtion');
      if (!localtion) {
        this.auth()
      } else {
        wx.getLocation({
          type: 'gcj02',
          success(res) {
            wx.setStorageSync('localtion', res);
            _this.latitude = res.latitude
            _this.longitude = res.longitude
            _this.nearlatitude = res.latitude
            _this.nearlongitude = res.longitude
            let data = {
              latitude: res.latitude,
              longitude: res.longitude
            }
            _this.getAdCode(data).then((res) => {
              if (res) {
                _this.getOperateAdcode(res).then((code) => {
                  _this.getNear(code)
                })
              }
            })
          },
        })
      }

    },
    methods: {
      toCharge() {
        wx.navigateTo({
          url: `../chargeDetail/main?bikeId=${this.bikeDetails.bikeId}`
        })
      },
      goActivity(notice) {
        let url = notice.hrefUrl
        wx.navigateTo({
          url: `../webView/main?url=${url}`
        })
      },
      closeNotice() {
        this.showNotice = false
        wx.setStorageSync('showNotice', 'false');
      },
      getNotice(adPosition) {
        let data = {
          adPosition: adPosition
        }
        Service.getNotice(data).then((res) => {
          if (res.code == 200) {
            let noticeVos = res.data.noticeVos
            if (noticeVos.length > 0) {
              switch (adPosition) {
                case '2':
                  this.noticeBox = noticeVos;
                  this.getNoticeBox = true
                  break
                case '9':
                  this.noticeTop = noticeVos;
                  this.showNoticeTop = true
                  break
              }
            }else {
              this.showNotice = false
            }
          }else {
            this.showNotice = false
          }
        })
      },
      tishi(){
        wx.navigateTo({
          url: '../notuseTip/main'
        })
      },
      auth() {
        let _this = this
        //获取设备位置
        wx.getLocation({
          type: 'gcj02',
          success(res) {
            wx.setStorageSync('localtion', res);
            _this.latitude = res.latitude
            _this.longitude = res.longitude
            let data = {
              latitude: res.latitude,
              longitude: res.longitude
            }
            _this.getAdCode(data).then((res) => {
              if (res) {
                _this.getOperateAdcode(res).then((code) => {
                  _this.getNear(code)
                })
              }
            })
          },
          fail: function () {

            wx.showModal({
              title: '请授权当前位置',
              showCancel: false,
              content: '需要获取您的地理位置，请确认授权，否则无法获取您所需数据',
              success: function (res) {
                if (res.confirm) {
                  wx.openSetting({
                    success: function (dataAu) {
                      if (dataAu.authSetting["scope.userLocation"] == true) {
                        wx.showToast({
                          title: '授权成功',
                          icon: 'success',
                          duration: 1000
                        })
                       //再次授权，调用getLocationt的API
                       wx.getLocation({
                         type: 'gcj02',
                         success(res) {
                           wx.setStorageSync('localtion', res);
                           let data = {
                             latitude: res.latitude,
                             longitude: res.longitude
                           }
                           _this.latitude = res.latitude
                           _this.longitude = res.longitude
                           _this.getAdCode(data).then((res) => {
                             if (res) {
                               _this.getOperateAdcode(res).then((code) => {
                                 _this.getNear(code)
                               })
                             }
                           })
                         }
                       })
                      } else {
                        wx.showToast({
                          title: '授权失败',
                          icon: 'none',
                          duration: 2000,
                          mask: true
                        })
                      }
                    }
                  })
                }
              }
            })
          }
        })
      },
      getAdCode(data) {
          console.log(data,"data");
          return new Promise((resolve,reject) => {
          let params = data
          params.noLoading = true
          Service.getAdCode(params).then((res) => {
            if (res.code == 200) {
              this.adCode = res.data.adCode
              resolve(res.data.adCode)
            }
          })
        })
      },
      //获取当前运营城区adcode
      getOperateAdcode(code){
          let _this = this
        return new Promise((resolve,reject) => {
          let adCode = _this.adCode
          let data = {
            adCode: code || adCode,
            noLoading: true
          }
          Service.getOperateAdcode(data).then((res) => {
            if (res.code == 200) {
              wx.setStorageSync('adCode',res.data.adCode)
              this.getArea()
              resolve(res.data.adCode)
            }
          })
        })
      },

      getArea() {
        this.polygons = []
        this.areaPolygons = []
        this.nearPolygons = []
        let parkMarks = []

        let _this = this
        //服务区域
        Service.getServiceArea().then((res) => {
          let operateAreaVos = res.data.areaVos
          let color = {strokeColor:'#78B473FF',fillColor:'#78B4731A',zIndex:2}
          if(operateAreaVos.length>0){
            let areaArr = canvasArea(operateAreaVos)
            areaArr.forEach((items) =>{
              _this.areaPolygons.push(
                {
                  points: items,
                  strokeWidth: 2,
                  strokeColor: color.strokeColor,
                  fillColor: color.fillColor,
                  opacity:0.15,
                  zIndex: color.zIndex
                }
              )
            })
            operateAreaVos.forEach((item) => {
              parkMarks.push({
                iconPath: '/static/images/map-markers/park-mark.png',
                width: '45rpx',
                height: '64rpx',
                longitude: item.centerLocation[0],
                latitude: item.centerLocation[1],
                zIndex: 99
              })
            })
          }
          this.markers = this.markers.concat(parkMarks)
          if (_this.getNoticeBox) {
            let showNotice = wx.getStorageSync('showNotice')
            if (showNotice == 'true') {
              _this.showNotice = true
            } else {
              _this.showNotice = false
            }
          }
        })

        //禁行区域
        Service.getForbidArea().then((res) => {
          let operateAreaVos = res.data.areaVos
          let color = {strokeColor:'#F98678FF',fillColor:'#F9867833',zIndex:4}
          if(operateAreaVos.length>0) {
            let areaArr = canvasArea(operateAreaVos)
            areaArr.forEach((items) =>{
              _this.areaPolygons.push(
                {
                  points: items,
                  strokeWidth: 2,
                  strokeColor: color.strokeColor,
                  fillColor: color.fillColor,
                  opacity:0.15,
                  zIndex: color.zIndex
                }
              )
            })
          }
        })
        //大还车区
        Service.getBigReturnArea().then((res) => {
          let operateAreaVos = res.data.areaVos
          let color = {strokeColor:'#93C1EFFF',fillColor:'#93C1EF26',zIndex:3}
          if(operateAreaVos.length>0) {
            let areaArr = canvasArea(operateAreaVos)

            areaArr.forEach((items) =>{
              _this.areaPolygons.push(
                {
                  points: items,
                  strokeWidth: 2,
                  strokeColor: color.strokeColor,
                  fillColor: color.fillColor,
                  opacity:0.15,
                  zIndex: color.zIndex
                }
              )
            })
          }
        })

      },
      getNear(code) {
        //附近还车区和车辆
        /**
         * 参数
         */
        this.polygons = []
        this.nearPolygons = []
        let _this= this
        let zoomLevel = ''
        let scale = Number(this.scale)
        if (scale >= 17) {
          zoomLevel = '1'
        } else if (scale >= 12 && scale < 17) {
          zoomLevel = '2'
        } else if (scale < 12){
          zoomLevel = '3'
        }
        let data = {
          zoomLevel:zoomLevel || '1',
          longitude:this.nearlongitude||this.longitude,
          latitude:this.nearlatitude||this.latitude,
          noLoading: true
        }
        let nearArr = []
        let bikeArr = []
        Service.getNearBikeArea(data).then((res) => {
          if(res.code ==200) {

            //附近的车辆
            let bikeVos = res.data.bikeVos
            //车辆优先级  半价车 > 折扣车 > 0元车
            bikeVos.forEach((items) => {
              if(items.halfPriceType == 1){  //1半价车  0 不是半价车
                bikeArr.push({
                  iconPath: '/static/images/map-markers/map_banjia.png',
                  width: '90rpx',
                  height: '100rpx',
                  longitude: items.centerLocation[0],
                  latitude: items.centerLocation[1],
                  zIndex: 99
                })
              }

              if(items.halfPriceType != 1) {
                if (items.discount) { //折扣车
                  bikeArr.push({
                    iconPath: '/static/images/map-markers/map_' + items.discount*10 + 'zhe.png',
                    width: '90rpx',
                    height: '100rpx',
                    longitude: items.centerLocation[0],
                    latitude: items.centerLocation[1],
                    zIndex: 99
                  })
                }else if(items.is0RMB == 1){ //1是零元车  0不是零元车
                    bikeArr.push({
                      iconPath: '/static/images/map-markers/map_0yuan.png',
                      width: '90rpx',
                      height: '100rpx',
                      longitude: items.centerLocation[0],
                      latitude: items.centerLocation[1],
                      zIndex: 99
                    })
                } else  {
                  bikeArr.push({
                    iconPath: '/static/images/map-markers/map_mebike_nor.png',
                    width: '90rpx',
                    height: '100rpx',
                    longitude: items.centerLocation[0],
                    latitude: items.centerLocation[1],
                    zIndex: 99
                  })
                }
              }

            })
            this.markers = this.markers.concat(bikeArr) 
            //附近的停车网点
            let operateAreaVos = res.data.areaVos
            let areaArrNear5 = []
            let areaArrNear6 = []
            operateAreaVos.forEach((item) => {

              if(item.areaType == 5){
                let arr = []
                let color = {strokeColor:'#FED033FF',fillColor:'#FED03333',zIndex:5}
                if (item.regionLocations) {
                  item.regionLocations.forEach((itemlocal) => {
                    arr.push({ longitude: itemlocal.location[0], latitude: itemlocal.location[1] })
                  })
                }
                areaArrNear5.push({
                  points: arr,
                  strokeWidth: 2,
                  strokeColor: color.strokeColor,
                  fillColor: color.fillColor,
                  opacity: 0.15,
                  zIndex: color.zIndex
                })
              }
              if(item.areaType == 6){
                let arr = []
                let color = {strokeColor:'#93C1EFFF',fillColor:'#93C1EF26',zIndex:6}
                if (item.regionLocations) {
                  item.regionLocations.forEach((itemlocal) => {
                    arr.push({ longitude: itemlocal.location[0], latitude: itemlocal.location[1] })
                  })
                }
                areaArrNear6.push({
                  points: arr,
                  strokeWidth: 2,
                  strokeColor: color.strokeColor,
                  fillColor: color.fillColor,
                  opacity: 0.15,
                  zIndex: color.zIndex
                })
              }

            })
            _this.nearPolygons = areaArrNear5.concat(areaArrNear6)
            setTimeout(()=>{
              _this.polygons = _this.areaPolygons.concat(this.nearPolygons)
            },500)
          }
        })


      },
      makePhone(phone) {
        wx.makePhoneCall({
          phoneNumber: phone
        });
      },
      jump(rout) {
        if (rout == 'myself') {

          let userInfo = wx.getStorageSync('userInfo')
          if (!userInfo) {
            wx.navigateTo({
              url: '../login/main'
            })
            return
          }
        }
        wx.navigateTo({
          url: `../${rout}/main`
        })

      },
      userCar() {
        if (this.useBike) {
          this.getOrderStatus('userCar')
        }
      },
      refresh(){
        this.getNear()
      },
      init() {
        let _this = this
        let mpCtx = wx.createMapContext("myMap");
        mpCtx.moveToLocation();
        wx.getLocation({
          type: 'gcj02',
          success(res) {
            wx.setStorageSync('localtion', res);
            _this.latitude = res.latitude
            _this.longitude = res.longitude
            _this.nearlongitude = res.longitude
            _this.nearlatitude = res.latitude
            _this.getNear()
          },
        })

      },

      getLngLat() {
        this.mapCtx = wx.createMapContext("myMap");
        let _this = this
        this.mapCtx.getCenterLocation({
          success: function (res) {
            let data = res
            _this.nearlongitude = data.longitude
            _this.nearlatitude = data.latitude
            _this.getNear()
          }
        })
      },

      regionChangeBegin() {
      },
      regionChangeEnd(e) {
        let _this = this
        if (e.type == 'end' && e.mp.causedBy == 'drag') {
          this.getLngLat()

        }
        if(e.type == 'end' && e.mp.causedBy == 'scale'){
          this.mapCtx = wx.createMapContext("myMap");
          this.mapCtx.getScale({
            success: function (res) {
              _this.scale = res.scale
            }
          })
        }
      },
      getWindowHeight() {
        this.windowHeight = wx.getSystemInfoSync('systemInfo').windowHeight - 152
      },
      getOrderStatus(type) {
        let userInfo = wx.getStorageSync('userInfo')
        if (!userInfo&&type) {
          wx.navigateTo({
            url: '../login/main'
          })
          return
        }
        if (type == 'userCar') {
          this.useBike = false
        }
        let data = {
          noLoading: type || ''
        }
        let _this = this
        setTimeout(() => {
          _this.useBike = true
        },2000)
        Service.getOrderStatus(data).then((res) => {
          if (res.code == 200) {
            if (res.data) {
              if (res.data.orderStatus == 200) {
                setTimeout(() => {
                  wx.reLaunch({
                    url: '../inUse/main?orderNo=' + res.data.orderNo +'&operateAreaId='+res.data.operateAreaId
                  })
//                  _this.useBike = true
                },200)
              } else if (res.data.orderStatus == 300&&type) {
                wx.navigateTo({
                  url: '../unfinishedOrder/main?orderNo=' + res.data.orderNo
                })
//                _this.useBike = true
              }
            } else {
              if (type == 'userCar') {
                wx.navigateTo({
                  url: '../unlock/main'
                })
//                _this.useBike = true
              }
            }
          } else if (res.code == -3) {
            wx.setStorageSync('userInfo', '');
            wx.navigateTo({
              url: '../login/main'
            })
//            _this.useBike = true
          }
        })
      },
      makeOrder() {
        this.disable= true
        let data = {
          bikeId: this.bikeDetails.bikeId,
          orderType: '2'
        }
        let _this = this
        setTimeout(() => {
          _this.disable= false
        },2000)
        Service.makeOrder(data).then((res) => {
//          this.disable= false
          if (res.code == 200) {
            if (res.data.orderStatus == 200) {
              wx.setStorageSync('noProhibit1', '');
              wx.setStorageSync('noProhibit2', '');
              wx.setStorageSync('noProhibit3', '');
              wx.setStorageSync('noProhibit4', '');
              wx.showToast({
                title: '开锁成功',
                icon: 'success',
                duration: 2000
              });
              setTimeout(() => {
                wx.reLaunch({
                  url: '../inUse/main?orderNo=' + res.data.orderNo +'&operateAreaId='+res.data.operateAreaId
                })
              },200)

            } else if (res.data.orderStatus == 300) {
              wx.reLaunch({
                url: '../waitPay/main?autoPay=1&orderNo='+res.data.orderNo
              })
            }
          } else if (res.code == 404 || res.code == 416 || res.code == 417 || res.code == 418) {
            setTimeout(() => {
              wx.redirectTo({
                url: `../deposit/main`
              })
            },2000)
          } else if (res.code == 473) {
            let bikeDetails = JSON.stringify(this.bikeDetails)
            wx.redirectTo({
              url: `../realName/main?bikeDetails=${bikeDetails}`
            })
          }
        })
      },
      goProhibit() {
        wx.navigateTo({
          url: `../prohibit/main?type=1`
        })
      },
      _bikeResult(params) {
        let that = this;
        Service.getBikeDetailv3(params).then((res) => {
          if (res.code == 200) {
            let data = {
              isInForbidTravel: res.data.isInForbidTravel,
              extensionMileage: res.data.extensionMileage,
              batteryLevel: res.data.batteryLevel,
              discountType: res.data.discountType,
              bikeId: res.data.bikeId,
              alertType:res.data.alertType,
              plateNo:res.data.plateNo,
              priceRuleStr:res.data.priceRuleStr
            }
           that._setBikeDetails(data)
          }
        })
      },
      _setBikeDetails(bikeDetails){
          if(bikeDetails) {
            this.bikeDetails = bikeDetails;
            this.isBikeDetailsShow = true
          }else {
            this.isBikeDetailsShow = false
          }
      }
    }
  }
</script>

<style lang="stylus" scoped>
  .color-yellow
    color #febd19
  .color-gray
    color #999999
  .fl
    float left
  .map
    height: 100vh;
    width: 100%

  .icon
    position: fixed
    width 75px
    height 75px
  .icon-refresh
    left 30px
    bottom: 126px;
  .icon-alert
    right 30px;
    bottom 400px;
  .icon-user
    right 30px
    bottom: 126px;
  .icon-locate
    right 30px
    bottom: 300px;
  .icon-tips
    right 30px
    bottom: 200px;
  .icon-center
    position: fixed
    left: 50%;
    top: 50%;
    transform: translate(-50%,-100%);
    width 34px
    height 62px
  .control-btn
    position: absolute;
    left: 125px;
    right: 125px;
    bottom: 70px;
    display: flex;
    justify-content: center;
    .bg
      width 500px
      height: 90px
    .button
      position: absolute
      top: 0px
      left 0px
      width 500px
      height:90px
      line-height: 90px
      font-size: 30px
      color: #333
      text-align center

  .tips
    position: fixed;
    top: 30px;
    left: 30px;
    right: 30px
    width: 690px;
    height: 120px;
    .swiper-container {
      width: 690px;
      height: 120px;
    }
    img
      width: 690px;
      height: 120px;

  .footer
    display: block
    position: fixed
    left 0px
    right 0px
    bottom: 0px
    width 100%
    background #ffffff
    justify-content: center;
    align-items: center
    border-top: 2px solid #bbbbbb
    overflow: auto
    .close-status 
      position absolute
      right 25px
      top 20px
      width 50px
      height 50px
      border-radius 25px
      background  #FED130
      color #ffffff
      text-align center
      line-height 50px
      z-index 10
    .flex-box
      display flex
      width 700px
      justify-content center
      margin 0 auto
      .flex-item-operation
        flex 1
        height 120px
        justify-content center
        text-align center
        margin-top 20px
        .img-operatin
          margin 0 auto
          width 70px
          height 70px
      .count-box
        height 120px
        .fl
          margin-left 60px
          height 120px
          line-height 120px
      .flex-item-info
        width 320px
        height 120px
        border-radius 10px
        box-shadow: -2px -2px 10rpx rgba(0, 0, 0, 0.1);
        margin 0 15px
        .item-info-line 
          margin-left 20px
          margin-top 20px
        .item-info-line:last-child
          font-size 24px
        .img-tag
          margin-top 33px
          margin-left 30px
          width 53px
          height 49px
    .desc
      display: block
      width 700px
      margin 20px auto
      .desc-row
        display: block
        height 50px
        line-height: 50px
        .search-scope
          padding 5px 20px
          background #f5f5f5
          border-radius 25px
          color #eb0d09
        .pay-detail {
          width 110px
          color #fff
          border-radius 10px
          text-align center
          background #fed130
        }
    .bike-info
      display: block
      width 700px
      margin 20px auto
      .logo
        display block
        float left
        width 100px
        height 100px
      .info 
        display block
        float left
        color #101010
        margin-left 60px
        .item
          display block
          height 50px
          line-height 50px
    .btn
      display: block
      width 300px
      height: 90px
      line-height: 90px
      margin 20px auto
      border-radius 45px
      background #FED130
      font-size 30px
      font-weight bold
      color: #fff
      text-align center
    .confirm-back
      background #f4f3ef
      color #000

    
  .notice-box
    position: fixed
    top: 0
    right 0
    bottom: 0
    left 0
    background rgba(0,0,0,0.7)
    z-index 999
    .swiper-container
      position: fixed
      top: 45%
      left 50%
      transform: translate(-50%, -50%);
      width 500px
      height 610px
      img {
        width 500px
        height 610px
      }
    .close
      position: fixed
      top: 80%
      left 50%
      transform: translate(-50%, -50%);
      width 70px
      height 70px
</style>
